<template>
<div>
	<div class="deng">
		<div>
			<img src="">
		</div>
		<van-cell is-link @click="showPopup" v-if="!a.token">
			<h3>点击登录</h3>
		</van-cell>
		<div class="ok" v-if="a.token">
			<h3>{{a.userInfo.username}}</h3>
			<el-dropdown>
            <span class="el-dropdown-link">
				<van-icon  name="cross" />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="Popup">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
			<!-- <van-icon @click="Popup" name="cross" /> -->
		</div>
	
	
		<van-popup v-model:show="show">
			<my-login class="login" @evt="add"></my-login>
		</van-popup>

	</div>
	<my-grid></my-grid>
</div>
</template>

<script>
// import axios from 'axios';
// import { ref } from 'vue';
import MyGrid from '../components/MyGrid.vue';
import MyLogin from '../components/MyLogin.vue';
import {useStore} from 'vuex'

export default {
  components: { MyGrid, MyLogin },
	data(){
		return {
            store:useStore(),
			show:false
		}
	},
	computed:{
	a(){
		return this.store.state.userInfo
	}

},
methods:{
	showPopup(){
		this.show = true;
	},
	Popup(){
	// 清空仓库里的用户信息
	this.$store.commit("updateUserInfo",{});
      // 本地存储里的token清空
      localStorage.removeItem("token");
      // 跳到登陆页面
      this.$router.push("/my")
	},
	add(value){
		this.show=value
	}
}
	// created(){
	// 	axios.post("/api/auth/loginByWeb",{username:'admin',pwd:123456}).then((res)=>{
	// 		console.log(res);
	// 	})
	// },
	// setup() {
	// 	const show = ref(false);
	// 	const showPopup = () => {
	// 		if(!a.token){
	// 			show.value = true;
	// 		}else{
	// 			show.value = false;

	// 		}
			
	// 	};
	// 	return {
	// 		show,
	// 		showPopup,
	// 	};
	// },
}
</script>
<style scoped>
.deng{
	background: #333;
    color: #fff;
    padding: 0.53333rem 0.26667rem;
    height: 1.86667rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.deng>div{
	width: 80px;
}
.deng>div>img{
	width: 70px;
	border-radius: 50%;
}

.van-cell{
	flex: 1;
	background: #333;
}
.van-cell h3{
	color: #fff;
}
.van-cell::after{
	border-bottom: none;
}
:deep(.van-popup){
	width: 90%;
	height: 6.6rem;
}
.login{
	width: 100%;
	height: 4.6rem;
	margin-top: 36px;
}
.ok{
	display: flex;
	flex: 1;
	justify-content: space-between;
	align-items: center;
}
.ok>h3{
	font-weight: 400;
	font-size: 16px;
}
.ok>i{
	font-size: 16px;
}
:deep(.van-grid-item__content--center){
	flex-basis: 33.3333%;
    padding-top: 33.3333%;
}
</style>